<template>
  <Dialog :title="dialogTitle" v-model="dialogVisible">
    <el-form
      ref="formRef"
      :model="formData"
      :rules="formRules"
      label-width="100px"
      v-loading="formLoading"
    >
       <el-form-item label="成品入库单号码" prop="inboundNo">
        <el-input v-model="formData.inboundNo" placeholder="请输入成品入库单号码" />
      </el-form-item>
      <el-form-item label="序号" prop="sequenceNumber">
        <el-input v-model="formData.sequenceNumber" placeholder="请输入序号" />
      </el-form-item>
      <el-form-item label="标签号" prop="labelNo">
        <el-input v-model="formData.labelNo" placeholder="请输入标签号" />
      </el-form-item>
      <el-form-item label="仓库ID" prop="warehouseId">
        <el-input v-model="formData.warehouseId" placeholder="请输入仓库ID" />
      </el-form-item>
      <el-form-item label="仓库名称" prop="warehouseName">
        <el-input v-model="formData.warehouseName" placeholder="请输入仓库名称" />
      </el-form-item>
      <el-form-item label="生产单号" prop="productionOrderNo">
        <el-input v-model="formData.productionOrderNo" placeholder="请输入生产单号" />
      </el-form-item>
      <el-form-item label="生产单ID" prop="productionOrderId">
        <el-input v-model="formData.productionOrderId" placeholder="请输入生产单ID" />
      </el-form-item>
      <el-form-item label="订单号ID" prop="orderId">
        <el-input v-model="formData.orderId" placeholder="请输入订单号ID" />
      </el-form-item>
      <el-form-item label="订单号" prop="orderNo">
        <el-input v-model="formData.orderNo" placeholder="请输入订单号" />
      </el-form-item>
      <el-form-item label="BOM ID" prop="bomId">
        <el-input v-model="formData.bomId" placeholder="请输入BOM ID" />
      </el-form-item>
      <el-form-item label="BOM No" prop="bomNo">
        <el-input v-model="formData.bomNo" placeholder="请输入BOM No" />
      </el-form-item>
      <el-form-item label="货号" prop="productCode">
        <el-input v-model="formData.productCode" placeholder="请输入货号" />
      </el-form-item>
      <el-form-item label="品名" prop="productName">
        <el-input v-model="formData.productName" placeholder="请输入品名" />
      </el-form-item>
      <el-form-item label="客户ID" prop="customerId">
        <el-input v-model="formData.customerId" placeholder="请输入客户ID" />
      </el-form-item>
      <el-form-item label="客户编号" prop="customerCode">
        <el-input v-model="formData.customerCode" placeholder="请输入客户编号" />
      </el-form-item>
      <el-form-item label="客户名称" prop="customerName">
        <el-input v-model="formData.customerName" placeholder="请输入客户名称" />
      </el-form-item>
      <el-form-item label="成品规格" prop="productSpecification">
        <el-input v-model="formData.productSpecification" placeholder="请输入成品规格" />
      </el-form-item>
      <el-form-item label="单价" prop="unitPrice">
        <el-input v-model="formData.unitPrice" placeholder="请输入单价" />
      </el-form-item>
      <el-form-item label="面积" prop="area">
        <el-input v-model="formData.area" placeholder="请输入面积" />
      </el-form-item>
      <el-form-item label="体积" prop="volume">
        <el-input v-model="formData.volume" placeholder="请输入体积" />
      </el-form-item>
      <el-form-item label="单重" prop="unitWeight">
        <el-input v-model="formData.unitWeight" placeholder="请输入单重" />
      </el-form-item>
      <el-form-item label="订单数" prop="orderQuantity">
        <el-input v-model="formData.orderQuantity" placeholder="请输入订单数" />
      </el-form-item>
      <el-form-item label="实际入库数" prop="actualInventoryQuantity">
        <el-input v-model="formData.actualInventoryQuantity" placeholder="请输入实际入库数" />
      </el-form-item>
      <el-form-item label="订单日期" prop="orderDate">
        <el-date-picker
          v-model="formData.orderDate"
          type="date"
          value-format="x"
          placeholder="选择订单日期"
        />
      </el-form-item>
      <el-form-item label="交货日期" prop="deliveryDate">
        <el-date-picker
          v-model="formData.deliveryDate"
          type="date"
          value-format="x"
          placeholder="选择交货日期"
        />
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="formData.remark" placeholder="请输入备注" />
      </el-form-item>
      <el-form-item label="盒式ID" prop="boxTypeId">
        <el-input v-model="formData.boxTypeId" placeholder="请输入盒式ID" />
      </el-form-item>
      <el-form-item label="盒式名称" prop="boxTypeName">
        <el-input v-model="formData.boxTypeName" placeholder="请输入盒式名称" />
      </el-form-item>
      <el-form-item label="材质ID" prop="materialId">
        <el-input v-model="formData.materialId" placeholder="请输入材质ID" />
      </el-form-item>
      <el-form-item label="材质名称" prop="materialName">
        <el-input v-model="formData.materialName" placeholder="请输入材质名称" />
      </el-form-item>
      <el-form-item label="生产材质ID" prop="productionMaterialId">
        <el-input v-model="formData.productionMaterialId" placeholder="请输入生产材质ID" />
      </el-form-item>
      <el-form-item label="生产材质名称" prop="productionMaterialName">
        <el-input v-model="formData.productionMaterialName" placeholder="请输入生产材质名称" />
      </el-form-item>
      <el-form-item label="盒式编号" prop="boxTypeCode">
        <el-input v-model="formData.boxTypeCode" placeholder="请输入盒式编号" />
      </el-form-item>
      <el-form-item label="材质编号" prop="materialCode">
        <el-input v-model="formData.materialCode" placeholder="请输入材质编号" />
      </el-form-item>
      <el-form-item label="生产材质编号" prop="productionMaterialCode">
        <el-input v-model="formData.productionMaterialCode" placeholder="请输入生产材质编号" />
      </el-form-item>
      <el-form-item label="品名2" prop="productName2">
        <el-input v-model="formData.productName2" placeholder="请输入品名2" />
      </el-form-item>
      <el-form-item label="配比" prop="proportionQuantity">
        <el-input v-model="formData.proportionQuantity" placeholder="请输入配比" />
      </el-form-item>
      <el-form-item label="套数" prop="sets">
        <el-input v-model="formData.sets" placeholder="请输入套数" />
      </el-form-item>
      <el-form-item label="入库数" prop="inventoryQuantity">
        <el-input v-model="formData.inventoryQuantity" placeholder="请输入入库数" />
      </el-form-item>
      <el-form-item label="入库时间" prop="inventoryTime">
        <el-date-picker
          v-model="formData.inventoryTime"
          type="date"
          value-format="x"
          placeholder="选择入库时间"
        />
      </el-form-item>
      <el-form-item label="组件" prop="subcomponent">
        <el-radio-group v-model="formData.subcomponent">
          <el-radio value="1">请选择字典生成</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="包装数" prop="packagingQuantity">
        <el-input v-model="formData.packagingQuantity" placeholder="请输入包装数" />
      </el-form-item>
      <el-form-item label="金额" prop="amount">
        <el-input v-model="formData.amount" placeholder="请输入金额" />
      </el-form-item>
      <el-form-item label="生产机台ID" prop="productionMachineId">
        <el-input v-model="formData.productionMachineId" placeholder="请输入生产机台ID" />
      </el-form-item>
      <el-form-item label="生产机台名称" prop="productionMachineName">
        <el-input v-model="formData.productionMachineName" placeholder="请输入生产机台名称" />
      </el-form-item>
      <el-form-item label="皮重" prop="tareWeight">
        <el-input v-model="formData.tareWeight" placeholder="请输入皮重" />
      </el-form-item>
      <el-form-item label="总数" prop="totalQuantity">
        <el-input v-model="formData.totalQuantity" placeholder="请输入总数" />
      </el-form-item>
      <el-form-item label="单位" prop="unit">
        <el-input v-model="formData.unit" placeholder="请输入单位" />
      </el-form-item>
      <el-form-item label="备注1" prop="remark1">
        <el-input v-model="formData.remark1" placeholder="请输入备注1" />
      </el-form-item>
      <el-form-item label="备注2" prop="remark2">
        <el-input v-model="formData.remark2" placeholder="请输入备注2" />
      </el-form-item>
      <el-form-item label="备注3" prop="remark3">
        <el-input v-model="formData.remark3" placeholder="请输入备注3" />
      </el-form-item>
      <el-form-item label="备注4" prop="remark4">
        <el-input v-model="formData.remark4" placeholder="请输入备注4" />
      </el-form-item>
      <el-form-item label="备注5" prop="remark5">
        <el-input v-model="formData.remark5" placeholder="请输入备注5" />
      </el-form-item>
      <el-form-item label="客户手工单号" prop="customerManualOrderNo">
        <el-input v-model="formData.customerManualOrderNo" placeholder="请输入客户手工单号" />
      </el-form-item>
      <el-form-item label="颜色" prop="color">
        <el-input v-model="formData.color" placeholder="请输入颜色" />
      </el-form-item>
      <el-form-item label="产品类型" prop="productType">
        <el-select v-model="formData.productType" placeholder="请选择产品类型">
          <el-option label="请选择字典生成" value="" />
        </el-select>
      </el-form-item>
      <el-form-item label="板标签号" prop="boardLabelNo">
        <el-input v-model="formData.boardLabelNo" placeholder="请输入板标签号" />
      </el-form-item>
      <el-form-item label="完工记录号" prop="completionRecordNo">
        <el-input v-model="formData.completionRecordNo" placeholder="请输入完工记录号" />
      </el-form-item>
      <el-form-item label="完工记录ID" prop="completionRecordId">
        <el-input v-model="formData.completionRecordId" placeholder="请输入完工记录ID" />
      </el-form-item>
      <el-form-item label="总重" prop="totalWeight">
        <el-input v-model="formData.totalWeight" placeholder="请输入总重" />
      </el-form-item>
      <el-form-item label="合同单号" prop="contractNo">
        <el-input v-model="formData.contractNo" placeholder="请输入合同单号" />
      </el-form-item>
      <el-form-item label="合同ID" prop="contractId">
        <el-input v-model="formData.contractId" placeholder="请输入合同ID" />
      </el-form-item>
      <el-form-item label="成本单价" prop="costUnitPrice">
        <el-input v-model="formData.costUnitPrice" placeholder="请输入成本单价" />
      </el-form-item>
      <el-form-item label="成本面积单价" prop="costAreaUnitPrice">
        <el-input v-model="formData.costAreaUnitPrice" placeholder="请输入成本面积单价" />
      </el-form-item>
      <el-form-item label="不良品数" prop="defectiveQuantity">
        <el-input v-model="formData.defectiveQuantity" placeholder="请输入不良品数" />
      </el-form-item>
      <el-form-item label="长" prop="length">
        <el-input v-model="formData.length" placeholder="请输入长" />
      </el-form-item>
      <el-form-item label="宽" prop="width">
        <el-input v-model="formData.width" placeholder="请输入宽" />
      </el-form-item>
      <el-form-item label="生产长" prop="productionLength">
        <el-input v-model="formData.productionLength" placeholder="请输入生产长" />
      </el-form-item>
      <el-form-item label="生产宽" prop="productionWidth">
        <el-input v-model="formData.productionWidth" placeholder="请输入生产宽" />
      </el-form-item>
      <el-form-item label="小包数" prop="smallPackageQuantity">
        <el-input v-model="formData.smallPackageQuantity" placeholder="请输入小包数" />
      </el-form-item>
      <el-form-item label="每层包数" prop="perLayerPackageQuantity">
        <el-input v-model="formData.perLayerPackageQuantity" placeholder="请输入每层包数" />
      </el-form-item>
      <el-form-item label="层数" prop="layerCount">
        <el-input v-model="formData.layerCount" placeholder="请输入层数" />
      </el-form-item>
      <el-form-item label="未入库数" prop="unshippedQuantity">
        <el-input v-model="formData.unshippedQuantity" placeholder="请输入未入库数" />
      </el-form-item>
      <el-form-item label="领用标签" prop="usedLabel">
        <el-input v-model="formData.usedLabel" placeholder="请输入领用标签" />
      </el-form-item>
      <el-form-item label="附加成本单价" prop="additionalCostUnitPrice">
        <el-input v-model="formData.additionalCostUnitPrice" placeholder="请输入附加成本单价" />
      </el-form-item>
      <el-form-item label="高" prop="height">
        <el-input v-model="formData.height" placeholder="请输入高" />
      </el-form-item>
      <el-form-item label="生产高" prop="productionHeight">
        <el-input v-model="formData.productionHeight" placeholder="请输入生产高" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </Dialog>
</template>
<script setup lang="ts">
import { StockFinishedGoodsInboundApi } from '@/api/erp/stockfinishedgoodsinbound'

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗

const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formType = ref('') // 表单的类型：create - 新增；update - 修改
const formData = ref({
  id: undefined,
  inboundId: undefined,
  inboundNo: undefined,
  sequenceNumber: undefined,
  labelNo: undefined,
  warehouseId: undefined,
  warehouseName: undefined,
  productionOrderNo: undefined,
  productionOrderId: undefined,
  orderId: undefined,
  orderNo: undefined,
  bomId: undefined,
  bomNo: undefined,
  productCode: undefined,
  productName: undefined,
  customerId: undefined,
  customerCode: undefined,
  customerName: undefined,
  productSpecification: undefined,
  unitPrice: undefined,
  area: undefined,
  volume: undefined,
  unitWeight: undefined,
  orderQuantity: undefined,
  actualInventoryQuantity: undefined,
  orderDate: undefined,
  deliveryDate: undefined,
  remark: undefined,
  boxTypeId: undefined,
  boxTypeName: undefined,
  materialId: undefined,
  materialName: undefined,
  productionMaterialId: undefined,
  productionMaterialName: undefined,
  boxTypeCode: undefined,
  materialCode: undefined,
  productionMaterialCode: undefined,
  productName2: undefined,
  proportionQuantity: undefined,
  sets: undefined,
  inventoryQuantity: undefined,
  inventoryTime: undefined,
  subcomponent: undefined,
  packagingQuantity: undefined,
  amount: undefined,
  productionMachineId: undefined,
  productionMachineName: undefined,
  tareWeight: undefined,
  totalQuantity: undefined,
  unit: undefined,
  remark1: undefined,
  remark2: undefined,
  remark3: undefined,
  remark4: undefined,
  remark5: undefined,
  customerManualOrderNo: undefined,
  color: undefined,
  productType: undefined,
  boardLabelNo: undefined,
  completionRecordNo: undefined,
  completionRecordId: undefined,
  totalWeight: undefined,
  contractNo: undefined,
  contractId: undefined,
  costUnitPrice: undefined,
  costAreaUnitPrice: undefined,
  defectiveQuantity: undefined,
  length: undefined,
  width: undefined,
  productionLength: undefined,
  productionWidth: undefined,
  smallPackageQuantity: undefined,
  perLayerPackageQuantity: undefined,
  layerCount: undefined,
  unshippedQuantity: undefined,
  usedLabel: undefined,
  additionalCostUnitPrice: undefined,
  height: undefined,
  productionHeight: undefined
})
const formRules = reactive({
  inboundId: [{ required: true, message: '主表ID不能为空', trigger: 'blur' }]
})
const formRef = ref() // 表单 Ref

/** 打开弹窗 */
const open = async (type: string, id?: number, inboundId: number) => {
  dialogVisible.value = true
  dialogTitle.value = t('action.' + type)
  formType.value = type
  resetForm()
  formData.value.inboundId = inboundId
  // 修改时，设置数据
  if (id) {
    formLoading.value = true
    try {
      formData.value = await StockFinishedGoodsInboundApi.getStockFinishedGoodsInboundDetail(id)
    } finally {
      formLoading.value = false
    }
  }
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const submitForm = async () => {
  // 校验表单
  await formRef.value.validate()
  // 提交请求
  formLoading.value = true
  try {
    const data = formData.value
    if (formType.value === 'create') {
      await StockFinishedGoodsInboundApi.createStockFinishedGoodsInboundDetail(data)
      message.success(t('common.createSuccess'))
    } else {
      await StockFinishedGoodsInboundApi.updateStockFinishedGoodsInboundDetail(data)
      message.success(t('common.updateSuccess'))
    }
    dialogVisible.value = false
    // 发送操作成功的事件
    emit('success')
  } finally {
    formLoading.value = false
  }
}

/** 重置表单 */
const resetForm = () => {
  formData.value = {
    id: undefined,
    inboundId: undefined,
    inboundNo: undefined,
    sequenceNumber: undefined,
    labelNo: undefined,
    warehouseId: undefined,
    warehouseName: undefined,
    productionOrderNo: undefined,
    productionOrderId: undefined,
    orderId: undefined,
    orderNo: undefined,
    bomId: undefined,
    bomNo: undefined,
    productCode: undefined,
    productName: undefined,
    customerId: undefined,
    customerCode: undefined,
    customerName: undefined,
    productSpecification: undefined,
    unitPrice: undefined,
    area: undefined,
    volume: undefined,
    unitWeight: undefined,
    orderQuantity: undefined,
    actualInventoryQuantity: undefined,
    orderDate: undefined,
    deliveryDate: undefined,
    remark: undefined,
    boxTypeId: undefined,
    boxTypeName: undefined,
    materialId: undefined,
    materialName: undefined,
    productionMaterialId: undefined,
    productionMaterialName: undefined,
    boxTypeCode: undefined,
    materialCode: undefined,
    productionMaterialCode: undefined,
    productName2: undefined,
    proportionQuantity: undefined,
    sets: undefined,
    inventoryQuantity: undefined,
    inventoryTime: undefined,
    subcomponent: undefined,
    packagingQuantity: undefined,
    amount: undefined,
    productionMachineId: undefined,
    productionMachineName: undefined,
    tareWeight: undefined,
    totalQuantity: undefined,
    unit: undefined,
    remark1: undefined,
    remark2: undefined,
    remark3: undefined,
    remark4: undefined,
    remark5: undefined,
    customerManualOrderNo: undefined,
    color: undefined,
    productType: undefined,
    boardLabelNo: undefined,
    completionRecordNo: undefined,
    completionRecordId: undefined,
    totalWeight: undefined,
    contractNo: undefined,
    contractId: undefined,
    costUnitPrice: undefined,
    costAreaUnitPrice: undefined,
    defectiveQuantity: undefined,
    length: undefined,
    width: undefined,
    productionLength: undefined,
    productionWidth: undefined,
    smallPackageQuantity: undefined,
    perLayerPackageQuantity: undefined,
    layerCount: undefined,
    unshippedQuantity: undefined,
    usedLabel: undefined,
    additionalCostUnitPrice: undefined,
    height: undefined,
    productionHeight: undefined
  }
  formRef.value?.resetFields()
}
</script>